<template>
  <div class="page-content">
    <div class="select">
      <div class="item">
        <h3>Unicode</h3>
        <ArtIconSelector v-model="icon1" :iconType="IconTypeEnum.UNICODE" />
      </div>
      <div class="item">
        <h3>ClassName</h3>
        <ArtIconSelector v-model="icon2" :iconType="IconTypeEnum.CLASS_NAME" width="260px" />
      </div>
      <div class="item">
        <h3>禁用</h3>
        <ArtIconSelector
          v-model="icon3"
          :iconType="IconTypeEnum.CLASS_NAME"
          width="260px"
          disabled
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { IconTypeEnum } from '@/enums/appEnum'

  defineOptions({ name: 'WidgetsIconSelector' })

  /**
   * Unicode 类型图标值
   */
  const icon1 = ref('&#xe6b5;')

  /**
   * ClassName 类型图标值
   */
  const icon2 = ref('iconsys-baitianmoshi3')

  /**
   * 禁用状态的图标值
   */
  const icon3 = ref('iconsys-baitianmoshi3')
</script>

<style scoped lang="scss">
  .select {
    .item {
      margin-bottom: 30px;

      h3 {
        padding-bottom: 10px;
        font-size: 16px;
        font-weight: 500;
      }
    }
  }
</style>
